@mixin darkMode() {
    @media (prefers-color-scheme: dark) {
        @content;
    }
}

.gdbg {
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-style: normal;
        font-family: 'Segoe UI', 'Tahoma', sans-serif;
        font-weight: normal;
        font-size: 16px;
        line-height: initial;
        color: black;
        background: none;
        border: none;
        text-decoration: none;
        outline: none;
        appearance: none;
        position: static;
        z-index: initial;
    }

    &-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999999999999999999999999999999;
        background-color: white;
        flex-flow: column;
        display: none;

        @include darkMode() {
            background-color: #263238;
        }

        .gdbg-resize-handle {
            top: -6px;
            display: block;
            background-color: #b0bec5;
            position: absolute;
            left: 0;
            height: 6px;
            width: 100%;
            cursor: row-resize;

            @include darkMode() {
                background-color: #455a64;
            }
        }

        &-show {
            display: flex;
        }
    }

    &-toggler {
        position: fixed;
        bottom: 0;
        right: 50px;
        color: white;
        background-color: #546e7a;
        z-index: 999999999999999999999999999999;
        display: none;
        padding: 5px 10px;
        border: 1px solid #78909c;
        border-bottom: none;
        border-radius: 5px 5px 0 0;
        cursor: pointer;
        font-size: 15px;
        font-weight: 500;

        @include darkMode() {
            background-color: #37474f;
            border-color: #455a64;
        }

        &-show {
            display: block;
        }
    }

    &-menu {
        display: flex;
        background-color: #cfd8dc;
        border-bottom: 1px solid #b0bec5;
        user-select: none;
        width: 100%;
        overflow: auto;

        @include darkMode() {
            background-color: #37474f;
            border-color: #455a64;
        }

        &::-webkit-scrollbar {
            height: 7px;
        }

        &::-webkit-scrollbar-track {
            background: transparent;
        }

        &::-webkit-scrollbar-thumb {
            background-color: #546e7a;
        }

        button {
            flex-shrink: 0;
            padding: 5px 15px;
            font-size: 14px;
            font-weight: 500;
            display: inline-block;
            border: 1px solid #b0bec5;
            border-top: none;
            border-bottom: none;
            cursor: pointer;

            &.gdbg-close {
                margin-left: auto;
                border: none;
                color: #546e7a;
                font-size: 15px;

                @include darkMode() {
                    color: white;
                }
            }

            .gdbg-status-code {
                display: inline-block;
                padding: 2px 5px;
                color: white;
                font-size: 12px;
                font-weight: 500;
                margin-right: 3px;

                &-green {
                    background-color: #4caf50;
                }

                &-yellow {
                    background-color: #f9a825;
                }

                &-blue {
                    background-color: #2196f3;
                }

                &-red {
                    background-color: #e53935;
                }

                &-purple {
                    background-color: #6a1b9a;
                }

                &-white {
                    background-color: white;
                    color: black;
                }
            }

            i {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                margin-right: 3px;
                width: 20px;
                height: 20px;
                color: white;
                font-size: 12px;
                font-weight: 800;
                border-radius: 100%;
                background-color: #f44336;
                font-style: normal;
            }

            &:first-child {
                border-left: none;
            }

            &:nth-last-child(2) {
                border-right: none;
            }

            &.gdbg-menu-active {
                color: white;
                background-color: #607d8b;
            }

            @include darkMode() {
                color: white;
                border-color: #546e7a;

                &.gdbg-menu-active {
                    background-color: #546e7a;
                }
            }
        }
    }

    &-content {
        overflow: auto;
        height: 100%;
        flex: 1;

        &::-webkit-scrollbar {
            width: 7px;
        }

        &::-webkit-scrollbar-track {
            background: transparent;
        }

        &::-webkit-scrollbar-thumb {
            background-color: #546e7a;
        }

        .gdbg-tab {
            display: none;

            &-active {
                display: block;
            }

            .gdbg-filter {
                position: absolute;
                bottom: 10px;
                right: 10px;
                display: flex;
                justify-content: flex-end;
                gap: 5px;

                button {
                    background-color: white;
                    font-size: 13px;
                    border-radius: 3px;
                    padding: 2px 5px;
                    cursor: pointer;
                    border: 1px solid gray;
                    opacity: 0.4;

                    &.gdbg-filter-active {
                        opacity: 1;

                        &:before {
                            content: '☑️';
                            margin-right: 5px;
                        }
                    }

                    &.gdbg-filter-all {
                        background-color: #4caf50;
                        color: white;
                        border-color: #388e3c;
                    }

                    &.gdbg-filter-error {
                        background-color: #ef5350;
                        border-color: #b71c1c;
                        color: white;

                        @include darkMode() {
                            background-color: #4f2726;
                            border-color: #991414;
                        }
                    }

                    &.gdbg-filter-warning {
                        background-color: #fff9c4;
                        border-color: #fdd835;
                        color: #f57f17;

                        @include darkMode() {
                            background-color: #7f7435;
                            border-color: #a78d16;
                            color: white;
                        }
                    }

                    &.gdbg-filter-dump {
                        color: white;
                        background-color: gray;
                    }
                }
            }
        }

        .gdbg-trace-toggle {
            display: inline-block;
            background-color: #d32f2f;
            color: white;
            font-size: 12px;
            font-weight: 500;
            padding: 2px 4px;
            margin-top: 5px;
            cursor: pointer;
        }

        .gdbg-params-toggle {
            background-color: #546e7a;
        }

        table {
            width: 100%;
            table-layout: auto;
            border-collapse: collapse;

            td {
                border: 1px solid gainsboro;
                padding: 3px 5px;

                @include darkMode() {
                    border-color: #37474f;
                }
            }

            .gdbg-message,
            .gdbg-message strong {
                font-size: 14px;
            }

            .gdbg-message {
                @include darkMode() {
                    color: white;
                }
            }

            .gdbg-message strong {
                font-weight: 700;
            }

            .gdbg-message-time {
                width: 1%;
                white-space: nowrap;
                font-size: 12px;
                color: dimgray;
                vertical-align: top;

                @include darkMode() {
                    color: #b2b2b2;
                }
            }

            .gdbg-data-key {
                width: 1%;
                font-weight: 500;
                white-space: nowrap;
                font-size: 14px;
                color: dimgray;
                vertical-align: top;

                @include darkMode() {
                    color: #a9a9a9;
                }
            }

            .gdbg-valign {
                vertical-align: middle;
            }

            .gdbg-timer-progress {
                padding: 5px;
            }

            .gdbg-timer-bar {
                width: var(--gdbg-bar-width);
                height: 15px;
                background-color: #2196f3;
                font-size: 12px;
                font-family: monospace;
                color: white;
                padding: 2px;
                min-width: max-content;

                &-request {
                    background-color: #4caf50;
                }
            }

            .gdbg-data-value,
            .gdbg-expandable-value {
                font-size: 14px;
                font-family: monospace;
                max-width: 100%;
                word-break: break-all;
            }

            .gdbg-data-value {
                @include darkMode() {
                    color: white;
                }
            }

            .gdbg-expandable-value {
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                text-overflow: ellipsis;
                color: #7b7b7b;
                cursor: pointer;

                &-show {
                    overflow: auto;
                    display: block;
                    -webkit-line-clamp: initial;
                    -webkit-box-orient: initial;
                    text-overflow: initial;
                    white-space: pre-wrap;
                }

                @include darkMode() {
                    color: #bababa;
                }
            }

            .gdbg-row-hidden {
                display: none;
            }

            .gdbg-row-error {
                .gdbg-expandable-value {
                    color: white;
                }
            }

            .gdbg-row-warning {
                background-color: #fff9c4;

                td {
                    border-color: #fdd835;
                }

                .gdbg-message,
                .gdbg-message-time {
                    color: #f57f17;
                }

                @include darkMode() {
                    background-color: #7f7435;

                    td {
                        border-color: #3e3e42;
                    }

                    .gdbg-message,
                    .gdbg-message-time {
                        color: white;
                    }
                }
            }

            .gdbg-exception-trace {
                font-size: 12px;
                color: #ffcdd2;
                padding-top: 5px;
                display: none;

                &-show {
                    display: block;
                }
            }

            .gdbg-params {
                font-size: 13px;
                font-family: monospace;
                color: #546e7a;

                @include darkMode() {
                    color: #90a4ae;
                }
            }

            .gdbg-row-error {
                background-color: #ef5350;

                td {
                    border-color: #b71c1c;
                }

                .gdbg-message,
                .gdbg-message strong,
                .gdbg-message-time {
                    color: #ffebee;
                }

                @include darkMode() {
                    background-color: #4f2726;

                    td {
                        border-color: #3e3e42;
                    }
                }
            }
        }
    }
}
